<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交</title>
	</head>
	<body>
		<form id="form1" name="form01" action="http:\\www.baidu.com" method ="get" >
			<input type="text" id="name" name="username" />
			<input type="button" onclick="submitForm01()" value="表单提交"/>
		</form>
		<hr />
		<form id="form2" name="form02" action="http:\\www.baidu.com" method ="get" >
			<input type="text" id="name2" name="username2" />
			<input type="submit" onclick="return submitForm02()" value="表单提交"/>
		</form>
		<hr />
		<!-- 第三种 -->
		<form id="form3" name="form03" action="http:\\www.baidu.com" method ="get" onsubmit="return submitForm03()">
				<input type="text" id="name3" name="username3" />
				<input type="submit"  value="表单提交"/>
			</form>
	</body>
	<!-- 表单提交
		1、使用普通的button按钮+onclick事件+事件中编写代码：获取表单.submit()
		2、使用submit按钮+onclick="return 函数()"+函数编写代码：最后必须返回：return true|false;
		3、使用submit按钮/图片提交按钮+表单onsubmit="return 函数();"+函数编写代码，
		最后必须返回：return true|false;
			-->
	<script type="text/javascript">
		//第一种
		function submitForm01(){
			var uname=document.getElementById("name").value;
			if(uname.trim()==""||uname==null){
				return;
			}
			//提交表单
			document.getElementById("form1").submit();
		}
		//第二种
		function submitForm02(){
			
			var uname=document.getElementById("name2").value;
			if(uname.trim()==""||uname==null){
				return false;
			}
			//提交表单
			return true;
		}
		
		//第三种
		function submitForm03(){
			
			var uname=document.getElementById("name3").value;
			if(uname.trim()==""||uname==null){
				return false;
			}
			//提交表单
			return true;
		}
		
	</script>
</html>
